<template>
    <div class="container">
        <div v-for="field in fields">
            <label>{{ field.label }}：</label>
            <span>{{ getValue(field) }}</span>
        </div>
    </div>
</template>
<script setup>
import * as _ from "lodash";

const { fields, data } = defineProps({
    fields: Array,
    data: Object,
});
const getValue = (field) => {
    let val = _.get(data, field.prop);
    if (field.converter) {
        return field.converter(val, data) || "--";
    }

    return val || "";
};
</script>

<style lang="scss" scoped>
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 16px;
}
</style>
